<%--
  Created by IntelliJ IDEA.
  User: Mr_C
  Date: 2017/3/13
  Time: 20:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@include file="/WEB-INF/views/common/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>${title}</title>
    <%--<link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">--%>
    <%--<script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>--%>
    <%--<script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>--%>
    <script src="${ctx}/js/jquery.min.js"></script>
    <link rel="stylesheet" href="${ctx}/css/bootstrap.min.css">
    <script src="${ctx}/js/bootstrap.min.js"></script>
    <link href="${ctx}/js/jPlayer/skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="${ctx}/js/jPlayer/dist/jplayer/jquery.jplayer.min.js"></script>
    <script type="text/javascript" src="${ctx}/js/jPlayer/dist/add-on/jplayer.playlist.min.js"></script>

    <style type="text/css">
        /* Custom Styles */
        ul.nav-tabs{
            width: 140px;
            margin-top: 20px;
            border-radius: 4px;
            border: 1px solid #ddd;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
        }
        ul.nav-tabs li{
            margin: 0;
            border-top: 1px solid #ddd;
        }
        ul.nav-tabs li:first-child{
            border-top: none;
        }
        ul.nav-tabs li a{
            margin: 0;
            padding: 8px 16px;
            border-radius: 0;
        }
        ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{
            color: #fff;
            background: #0088cc;
            border: 1px solid #0088cc;
        }
        ul.nav-tabs li:first-child a{
            border-radius: 4px 4px 0 0;
        }
        ul.nav-tabs li:last-child a{
            border-radius: 0 0 4px 4px;
        }
        ul.nav-tabs.affix{
            top: 30px; /* Set the top position of pinned element */
        }
        .m{ margin-left: auto; margin-right: 100px; width: 100%;height: 400px;margin-top: 100px}
        .video-js{width: 100%}

        #playlist li {
            color: blue;
            text-decoration: underline;
        }
        #playlist li:hover {
            color: black;
            cursor: pointer;
        }
    </style>

    <script language="javascript">
        function openMapBox(office_id){
            $("#officedetail").empty();
            $("#officedetail").append("<iframe src='${ctx}/office/preOfficeDetail?office_id="+office_id+"' id=\"myiframe\" scrolling=\"yes\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>");
        }
    </script>

    <script type="text/javascript">
        function initJPlayer(player_id, container_id, video_count, loc, poster_loc){
            var list = []
            for(var i = 0; i<video_count; i++){
                var title = "";
                if(i==0){
                    title="当前视频";
                }else{
                    title="视频"+i;
                }
                var play={
                        title:title,
                        artist:"Santiago Pet Hospital",
                        free:true,
                        m4v: "${vtx}"+loc[i],
                        poster:"${vtx}"+poster_loc[i]
                };
                list.push(play);
            }
            new jPlayerPlaylist({
                jPlayer: player_id,
                cssSelectorAncestor: container_id,
                m4v: "${vtx}"+loc[0],
                poster:"${vtx}"+poster_loc[0]
            }, list, {
                swfPath: "${ctx}/dist/jplayer",
                supplied: "webmv, ogv, m4v",
                useStateClassSkin: true,
                autoBlur: false,
                smoothPlayBar: true,
                keyEnabled: true
            });
        }
    </script>
    <script type="text/javascript">
        $(document).ready(function() {
            //加载系统模板
            $.ajax({
                url: '${ctx}/cosplay/getFlowDetail',
                type: 'POST',
                data:{
                    flow_id:'${flow_id}'
                },
                dataType: 'json',
                success: function(responseText) {

                    //此处加载旁边悬浮框以及section
                    for(var i = 0;i < responseText.flow_detail_count;i++){
                        $("#sectionlist").append("<h2 id='section-"+i+"'>"+responseText.flow_detail[i].block_name+"</h2>");
                        $("#sectionlist").append("<hr/>");
                        if(i==0){
                            $("#divlist").append("<li class='active'><a href='#section-"+i+"'>"+responseText.flow_detail[i].block_name+"</a></li>");
                        }else{
                            $("#divlist").append("<li><a href='#section-"+i+"'>"+responseText.flow_detail[i].block_name+"</a></li>");
                        }
                    }


                    //此处加载各种文字信息
                    $("#jumtitle").append("<h1>${flow_name}</h1>");
                    for(var i=0; i<responseText.flow_detail_count;i++){
                        $("#section-"+i).append("<h3>流程详解</h3>");
                        $("#section-"+i).append("<h4>"+responseText.flow_detail[i].block_dis+"</h4>");
                        $("#section-"+i).append("<br/>");
                    }

                    //此处加载各种图片信息
                    for(var i=0; i<responseText.flow_detail_count;i++){
                        $("#section-"+i).append("<h3>图片示例</h3>");
                        if(responseText.flow_detail[i].block_img_loc_count>0){
                            $("#section-"+i).append("<div id='office_picture"+i+"' class='carousel slide'></div>");
                            $("#office_picture"+i).append("<ol class='carousel-indicators' id='office_picture_carousel"+i+"'></ol>");
                            $("#office_picture"+i).append("<div class='carousel-inner' id='office_picture_inner"+i+"'></div>");
                            $("#office_picture"+i).append("<a class='left carousel-control' href='#office_picture"+i+"' role='button' data-slide='prev'>\n" +
                                    "<span class='glyphicon glyphicon-chevron-left' aria-hidden='true'></span>\n" +
                                    "<span class='sr-only'>Previous</span>" +
                                    "</a>");
                            $("#office_picture"+i).append("<a class='right carousel-control' href='#office_picture"+i+"' role='button' data-slide='next'>\n" +
                                    "<span class='glyphicon glyphicon-chevron-right' aria-hidden='true'></span>\n" +
                                    "<span class='sr-only'>Next</span>" +
                                    "</a>");
                            for(var j=0; j<responseText.flow_detail[i].block_img_loc_count;j++){
                                if(j==0) {
                                    //加载图片下方控制点
                                    $("#office_picture_carousel"+i).append("<li data-target='#office_picture"+i+"' data-slide-to=\"0\" class=\"active\"></li>")
                                    //加载图片内容
                                    $("#office_picture_inner"+i).append("<div class=\"item active\">\n"+
                                            "<img src=\"${vtx}"+responseText.flow_detail[i].block_img_loc[j]+"\" alt=\""+j+"\">\n"+
                                            "</div>");
                                }else{
                                    $("#office_picture_carousel"+i).append("<li data-target='#office_picture"+i+"' data-slide-to=\""+j+"\"></li>")
                                    $("#office_picture_inner"+i).append("<div class=\"item\">\n"+
                                            "<img src=\"${vtx}"+responseText.flow_detail[i].block_img_loc[j]+"\" alt=\""+j+"\">\n"+
                                            "</div>");
                                }
                            }
                        }else{
                            $("#section-"+i).append("<h4>暂无图片资源</h4>");
                        }
                        $("#section-"+i).append("<br/>");
                    }
                    //此处添加视频信息
                    for(var i=0; i<responseText.flow_detail_count;i++){
                        $("#section-"+i).append("<h3>视频详解</h3>");
                        if(responseText.flow_detail[i].block_vio_loc_count>0){
                            $("#section-"+i).append("<div id='jp_container_"+i+"' class='jp-video jp-video-270p' role='application' aria-label='media player'></div>");
                            $("#jp_container_"+i).append("<div class='jp-type-playlist' id='jp-type-playlist-"+i+"'></div>");
                            $("#jp-type-playlist-"+i).append("<div id='jquery_jplayer_"+i+"' class='jp-jplayer'></div>");
                            $("#jp-type-playlist-"+i).append("<div class='jp-gui' id='jp-gui-"+i+"'>");
                            $("#jp-gui-"+i).append("<div class='jp-video-play'>\n"+
                                    "<button class='jp-video-play-icon' role='button' tabindex='0'>play</button>\n"+
                                    "</div>");
                            $("#jp-gui-"+i).append("<div class='jp-interface'>\n"+
                                    "<div class='jp-progress'>\n"+
                                    "<div class='jp-seek-bar'>\n" +
                                    "<div class='jp-play-bar'></div>\n" +
                                    "</div>\n" +
                                    "</div>\n" +
                                    "<div class='jp-current-time' role='timer' aria-label='time'>&nbsp;</div>\n" +
                                    "<div class='jp-duration' role='timer' aria-label='duration'>&nbsp;</div>\n" +
                                    "<div class='jp-controls-holder'>\n" +
                                    "<div class='jp-controls'>\n" +
                                    "<button class='jp-previous' role='button' tabindex='0'>previous</button>\n" +
                                    "<button class='jp-play' role='button' tabindex='0'>play</button>\n" +
                                    "<button class='jp-next' role='button' tabindex='0'>next</button>\n" +
                                    "<button class='jp-stop' role='button' tabindex='0'>stop</button>\n" +
                                    "</div>\n" +
                                    "<div class='jp-volume-controls'>\n" +
                                    "<button class='jp-mute' role='button' tabindex='0'>mute</button>\n" +
                                    "<button class='jp-volume-max' role='button' tabindex='0'>max volume</button>\n" +
                                    "<div class='jp-volume-bar'>\n" +
                                    "<div class='jp-volume-bar-value'></div>\n" +
                                    "</div>\n" +
                                    "</div>\n" +
                                    "<div class='jp-toggles'>\n" +
                                    "<button class='jp-repeat' role='button' tabindex='0'>repeat</button>\n" +
                                    "<button class='jp-shuffle' role='button' tabindex='0'>shuffle</button>\n" +
                                    "<button class='jp-full-screen' role='button' tabindex='0'>full screen</button>\n" +
                                    "</div>\n" +
                                    "</div>\n" +
                                    "<div class='jp-details'>\n" +
                                    "<div class='jp-title' aria-label='title'>&nbsp;</div>\n" +
                                    "</div>\n" +
                                    "</div>\n");
                            $("#jp-type-playlist-"+i).append("<div class='jp-playlist'>\n" +
                                    "<ul>\n" +
                                    "<li>&nbsp;</li>\n" +
                                    "</ul>\n" +
                                    "</div>\n" +
                                    "<div class='jp-no-solution'>\n" +
                                    "<span>Update Required</span>\n" +
                                    "To play the media you will need to either update your browser to a recent version or update your <a href='http://get.adobe.com/flashplayer/' target='_blank'>Flash plugin</a>\n" +
                                    "</div>\n");


                            var player_id = "#jquery_jplayer_"+i;
                            var container_id = "#jp_container_"+i;
                            initJPlayer(player_id,container_id,responseText.flow_detail[i].block_vio_loc_count, responseText.flow_detail[i].block_vio_loc, responseText.flow_detail[i].block_viothb_loc);

                        }else{
                            $("#section-"+i).append("<h4>暂无视频资源</h4>");
                        }
                        $("#section-"+i).append("<br/>");
                    }

                }
            });

        });
    </script>
</head>
<body data-spy="scroll" data-target="#myScrollspy">
<div class="container">
    <div class="jumbotron" id="jumtitle">
    </div>
    <div class="row">
        <div class="col-xs-3" id="myScrollspy">
            <ul id="divlist"class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125">

            </ul>
        </div>
        <div id="sectionlist"class="col-xs-9">
        </div>
    </div>
</div>
</body>
</html>
